<template>
	<!-- tableBar我的页面 -->
	<view class="page-wrpapper">
		<!-- 头部用户信息 -->
		<view class="header-user-info">
			<view class="user-avatar">
				<u-avatar size="175" :src="user && user.avatarUrl ? user.avatarUrl : defaultAvatar" mode="square"></u-avatar>
			</view>
			<view v-if="!user.openId" class="user-info">
				<u-button :loading="isLogin" class="get-user-info-button" open-type="getUserInfo" size="medium" @getuserinfo="handleLogin">授权登录</u-button>
			</view>
			<view v-else class="user-info">
				<view class="user-name">{{ user.nickName }}</view>
				<!-- <view class="user-message" @click="handleToMessage">
					<view class="message-icon">
						<view class="iconfont icon-laba"></view>
					</view>
					<view>
						系统消息
					</view>
				</view> -->
			</view>
		</view>
		
		<!-- <button @click="handlePay">支付</button> -->

		<!-- 我的发布 -->
		<view class="mine-release-box">
			<ReleaseList :dataList="signList" :totalCount="pagination.totalCount" @scrolltolower="handleLoadMoreSign"></ReleaseList>
		</view>

		<!-- 我的打卡 -->
		<view class="mine-clock-in">
			<ReleaseList title="我的打卡" titleIcon="icon-daqia" :dataList="clockInList" :totalCount="clockInPagination.totalCount"
			 @scrolltolower="handleLoadMoreClockIn"></ReleaseList>
		</view>

		<!-- 余额和捐赠 -->
		<navigator class="common mine-balance-donation" :url="`/pages/insidePages/mineDonation/index?flag=mine&openId=${user.openId}`">
			<view class="left">
				<view class="icon">
					<view class="iconfont donation-icon icon-yue"></view>
				</view>
				<view class="text">余额和捐赠</view>
			</view>
			<view class="right">
				<u-icon name="arrow-right" size="30"></u-icon>
			</view>
		</navigator>

		<!-- 我的关注 -->
		<navigator class="common mine-attention" :url="`/pages/insidePages/mineAttention/index?flag=mine&openId=${user.openId}`">
			<view class="left">
				<view class="icon">
					<view class="iconfont like-icon icon-home_ico_like-"></view>
				</view>
				<view class="text">我的关注</view>
			</view>
			<view class="right">
				<u-icon name="arrow-right" size="30"></u-icon>
			</view>
		</navigator>
		
		<!-- 登录弹窗 -->
		<u-popup v-model="showLoginDialog" mode="center" width="500rpx">
			<view class="popup-wrapper">
				<view class="tip">
					<view>您凭证已过期或未登录</view>
					<view>请登录</view>
				</view>
				<u-button type="primary" :loading="isLogin"  open-type="getUserInfo" @getuserinfo="handleLogin">登录</u-button>
			</view>
		</u-popup>
		
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import ReleaseList from './components/ReleaseList.vue'
	import loginMixin from '@/utils/loginMixin.js'
	import {
		getSignListAll,
		removeCache
	} from '@/api/home.js'
	import {
		pay
	} from '@/api/user.js'


	export default {

		mixins: [loginMixin],

		components: {
			ReleaseList
		},

		data() {
			return {
				showLoginDialog: false, // 显示登陆弹窗
				signList: [], // 发布列表
				clockInList: [], // 打卡列表
				defaultAvatar: require('@/static/user/default-avatar.png'),
				pagination: { // 分页参数
					startIndex: 0,
					length: 15,
					totalCount: 0,
				},
				clockInPagination: { // 打卡分页参数
					startIndex: 0,
					length: 15,
					totalCount: 0,
				}
			}
		},
		
		

		onLoad() {
			this.handleShowLogin()
			this.init()
		},

		methods: {
			// 临时接口，删除缓存
			// async handleRemoveCache() {
			// 	uni.request({
			// 		header: {
			// 			'Content-Type': 'application/x-www-form-urlencoded'
			// 		},
			// 		url: 'https://mini.chi1jing.com/cj/web/removeCache',
			// 		method: 'POST',
			// 		data: {
			// 			data: JSON.stringify({ openId: this.user.openId })
			// 		},
			// 		success: (res) => {
			// 			console.log(res)
			// 		}
			// 	})
			// },
			
			async handlePay() {
				if (!this.user.openId) return
				const data = JSON.stringify({
					openId: this.user.openId
				})
				const { resultData: { config }, resultMsg } = await pay({ data })
				console.log(config)
				uni.requestPayment({
				    provider: 'wxpay',
				    timeStamp: config.timestamp,
				    nonceStr: config.nonce,
				    package: config.prepayId,
				    signType: config.signType,
				    paySign: config.signature,
				    success: (res)=> {
				        this.$refs.uTips.show({
				        	title: '支付成功',
				            type: 'success',
				            duration: '2300'
				        })
				    },
				    fail: (err) => {
						this.$refs.uTips.show({
							title: resultMsg,
						    type: 'error',
				       	    duration: '2300'
				       	})
				    }
				})
			},
			
			handleShowLogin() {
				if (!this.user || !this.user.openId) {
					this.showLoginDialog = true
				}
			},
			
			async init() {
				this.signList = []
				this.clockInList = []
				await this.handleGetSignListAll()
				await this.handleGetClockIn()
			},

			// 跳转信息列表
			handleToMessage() {
				uni.navigateTo({
					url: `/pages/insidePages/message/index?openId=${this.user.openId}`
				})
			},

			// 分页获取我的发布
			handleLoadMoreSign() {
				if (this.pagination.totalCount >= this.signList.length) return
				this.pagination.startIndex += 1
				this.handleGetSignListAll()
			},

			// 分页获取我的打卡
			handleLoadMoreClockIn() {
				if (this.clockInPagination.totalCount >= this.clockInList.length) return
				this.clockInPagination.startIndex += 1
				this.handleGetClockIn()
			},

			// 获取发布数据
			async handleGetSignListAll() {
				if (!this.user.openId) return
				const data = JSON.stringify({
					signStatus: 1, // 1:发布 2: 打卡
					openId: this.user.openId,
					startIndex: this.pagination.startIndex,
					length: this.pagination.length
				})
				try {
					const {
						resultData
					} = await getSignListAll({
						data
					})
					this.signList = [...this.signList, ...resultData.list]
					this.pagination.totalCount = resultData.totalCount
				} catch (e) {
					//TODO handle the exception
				}

			},

			// 获取打卡
			async handleGetClockIn() {
				if (!this.user.openId) return
				const data = JSON.stringify({
					signStatus: 2, // 1:发布 2: 打卡
					openId: this.user.openId,
					startIndex: this.clockInPagination.startIndex,
					length: this.clockInPagination.length
				})
				try {
					uni.showLoading({
					    title: '加载中'
					});
					const {
						resultData
					} = await getSignListAll({
						data
					})
					this.clockInList = [...this.clockInList, ...resultData.list]
					this.clockInPagination.totalCount = resultData.totalCount
					uni.hideLoading()
				} catch (e) {
					uni.hideLoading()
				}
			}
		}
	}
</script>

<style lang="scss">
	.page-wrpapper {
		background-color: rgb(245,245,245);
	}
	
	// 头部用户信息
	.header-user-info {
		width: 100%;
		height: 320rpx;
		display: flex;
		align-items: flex-end;
		margin-bottom: 24rpx;
		padding: 0 0 30rpx 60rpx;
		background-image: url("https://vrfbylnr.cdn.bspapp.com/VRFBYLNR-free1/b1b261c0-e1a2-11e9-a30a-41900ee53442.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-color: #C0C0C0;
		box-sizing: border-box;

		.user-avatar {
			margin-right: 53rpx;
		}

		.user-info {
			margin-bottom: 60rpx;
			
			.get-user-info-button {
				font-size: 24rpx;
			}

			.user-name {
				// margin-bottom: 12rpx;
				color: #fff;
				font-size: 48rpx;
			}

			.user-message {
				position: relative;
				display: flex;
				padding: 8rpx;
				background-color: #fff;
				border-radius: 8rpx;

				.message-icon {
					margin-right: 12rpx;

					.icon-laba {
						font-size: 40rpx;
						color: #54ceff;
					}
				}
			}
		}
	}

	.mine-release-box {
		margin-bottom: 32rpx;
	}

	.mine-clock-in {
		margin-bottom: 56rpx;
	}

	.common {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx 40rpx;

		.left {
			display: flex;

			.icon {
				margin-right: 16rpx;

				.iconfont {
					font-size: 40rpx;

					&.donation-icon {
						color: #319ef0;
					}

					&.like-icon {
						color: #e6716a;
					}
				}
			}
		}
	}

	.mine-balance-donation {
		background-image: linear-gradient(to right, #f09964, #d51717);
	}

	.mine-attention {
		background-image: linear-gradient(to right, #63e6d9, #049592);
	}
	
	.popup-wrapper {
		padding: 24rpx 24rpx 40rpx;
		text-align: center;
	
		.tip {
			padding: 50rpx 0;
		}
	}
</style>
